<template>
  <view class="login">
    <view class="box">
      <text class="left">账号登录</text>
      <text class="right">
        <text class="text">手机号登录</text>
        <view class="icon">
          <u-icon name="play-right-fill" color="#EF4F3F" size="18px"></u-icon>
        </view>
      </text>
    </view>
    <!-- from表单 -->
    <u--form :model="form" ref="uForm" :rules="rules">
      	<u-form-item prop="userInfo.name" >
      <u--input placeholder="请输入账号" clearable border="bottom" v-model="form.userInfo.name"></u--input>
        </u-form-item>
      <u-form-item prop="userInfo.password">
      <u--input type="password" placeholder="请输入密码" clearable  border="bottom" v-model="form.userInfo.password"></u--input>
      </u-form-item>
    </u--form>
    <u-button @click="submit" class="btn">登录</u-button>
  </view>
</template>
	
<script>
  export default {
    name: '',
    components: {},
    data() {
      return {
        form:{
          userInfo:{
            name:'hdsj001',
            password:''
          }
        },
	      rules: {
				'userInfo.name':{
						required: true,
						message: '请输入账号',
						trigger: ['blur', 'change']
					},
      'userInfo.password': {
            required: true,
            message: '请输入密码',
            trigger: ['blur', 'change']
          }
        
			}
      };
    },
    created() {},
    mounted() {},
    onLoad() {},
    methods: {
async submit() {
  const res2 = await uni.$http.post('/login/account',{
    account:this.form.userInfo.name,
    password:this.form.userInfo.password
  })
  console.log(res2)
  if(res2.data.code === 200){
    
   uni.setStorageSync('token',res2.data.data)
  }
    if(!uni.getStorageSync('token')) {
      return uni.showToast({
        icon:'error',
        title:'登录失败'
      })
      
    }else{
     await  uni.showToast({
          icon:'success',
          title:'登录成功'
        })
       uni.switchTab({
        url:'/pages/index/index'
      })
    }
  

		}
	},
    
  }
</script>

<style lang="scss">
  html {
    background-color: #ffffff;
  }

  .login {
    margin-top: 75rpx;
    .u-form{
      padding: 20px;
    }

    .box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 32rpx;

      .left {
        font-family: PingFangSC-SNaNpxibold;
        font-weight: 600;
        font-size: 24px;
        color: #2A2929;
      }

      .right {
        width: 100px;
        display: flex;
        position: relative;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 16px;
        color: #EF4F3F;

        ::v-deep .icon {
          position: absolute;
          top: 3px;
          right: -4px;
          width: 20px;
        }
      }
    }
    
  }
  .btn{
    background-color: #ef4f3f;
    border-radius: 1.5625rem;
    margin: 20px;
    box-sizing: border-box;
    color:#ffffff
  }
  ::v-deep .u-button{
    width: 309px;
  }
</style>